
<template>
    <div class="onw_container">
        <header>
            <p>欠费账龄</p>
        </header>
        <el-form :inline="true" :model="form" class="main_searchBar">
            <el-form-item label="区域:">
                <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
            </el-form-item>
            <el-form-item label="账期:">
                <el-date-picker
                    size="mini"
                    v-model="form.month"
                    value-format="yyyyMM"
                    type="month"
                    placeholder="选择年月"
                    :picker-options="pickerOptions"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="客户群:">
                <el-select v-model="form.custType" size="mini">
                    <el-option
                        v-for="(it, i) in types"
                        :key="i"
                        :label="it.label"
                        :value="it.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                    size="mini"
                    @click="search()"
                    type="primary"
                    id="search_btn"
                    >查询</el-button
                >
                <el-button
                    size="mini"
                    type="success"
                    id="export_btn"
                    @click="handle_export"
                    >导出</el-button
                >
            </el-form-item>
        </el-form>
        <el-tabs>
            <el-tab-pane label="项目型欠费">
                <ux-grid
                    size="mini"
                    id="tablePx"
                    ref="tablePx"
                    :header-row-style="{ background: '#eef1f6' }"
                    border
                    :stripe="true"
                    :widthResize="true"
                    :height="height"
                    style="width: 100%"
                    v-loading="showTableLoading"
                    show-overflow="tooltip"
                    show-header-overflow="title"
                >
                    <ux-table-column
                        min-width="120"
                        title="上级区域"
                        align="center"
                        field="parentName"
                    />
                    <ux-table-column
                        min-width="120"
                        title="区域"
                        align="center"
                        field="areaName"
                    />
                    <ux-table-column
                        :title="it.label"
                        :field="it.value"
                        align="center"
                        min-width="130"
                        v-for="(it, index) in columns"
                        :key="'it' + index"
                    />
                </ux-grid>
            </el-tab-pane>
            <el-tab-pane label="用户欠费">
                <ux-grid
                    size="mini"
                    id="tablePx2"
                    ref="tablePx2"
                    :header-row-style="{ background: '#eef1f6' }"
                    border
                    :stripe="true"
                    :widthResize="true"
                    :height="height"
                    style="width: 100%"
                    v-loading="showTableLoading"
                    show-overflow="tooltip"
                    show-header-overflow="title"
                >
                    <ux-table-column
                        min-width="120"
                        title="上级区域"
                        align="center"
                        field="parentName"
                    />
                    <ux-table-column
                        min-width="120"
                        title="区域"
                        align="center"
                        field="areaName"
                    />
                    <ux-table-column
                        :title="it.label"
                        :field="it.value"
                        align="center"
                        min-width="130"
                        v-for="(it, index) in columns"
                        :key="'it' + index"
                    />
                </ux-grid>
            </el-tab-pane>
            <el-tab-pane label="OCS欠费">
                <ux-grid
                    size="mini"
                    id="tablePx3"
                    ref="tablePx3"
                    :header-row-style="{ background: '#eef1f6' }"
                    border
                    :stripe="true"
                    :widthResize="true"
                    :height="height"
                    style="width: 100%"
                    v-loading="showTableLoading"
                    show-overflow="tooltip"
                    show-header-overflow="title"
                >
                    <ux-table-column
                        min-width="120"
                        title="上级区域"
                        align="center"
                        field="parentName"
                    />
                    <ux-table-column
                        min-width="120"
                        title="区域"
                        align="center"
                        field="areaName"
                    />
                    <ux-table-column
                        :title="it.label"
                        :field="it.value"
                        align="center"
                        min-width="130"
                        v-for="(it, index) in columns"
                        :key="'it' + index"
                    />
                </ux-grid>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { $budgetAPI, $budget } from "@/api";
import qs from "qs";
import { getCookie, setCookie } from "@/common/js/cookie";
import prefixAPI from "@/api/prefixAPI"; // prefixAPI 前缀
const url = prefixAPI.pack;
import {
    setSessionStorage,
    getSessionStorage,
    removeSessionStorage,
} from "@/common/js/storage";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
    data() {
        return {
            form: {
                areaId: "",
                month: this.moment().subtract(1, "months").format("YYYYMM"),
                custType: "",
            },
            pickerOptions: this.pickerDisabled(),
            disabledTime: this.moment().subtract(1, "months").format("YYYYMM"),
            showTableLoading: false,
            height: window.innerHeight - 60 - 30 - 175,
            tableData: [],
            columns: [
                {
                    label: "0账龄",
                    value: "fee0",
                },
                {
                    label: "欠费1个月",
                    value: "fee1",
                },
                {
                    label: "欠费2个月",
                    value: "fee2",
                },
                {
                    label: "欠费3个月",
                    value: "fee3",
                },
                {
                    label: "欠费4个月",
                    value: "fee4",
                },
                {
                    label: "欠费5个月",
                    value: "fee5",
                },
                {
                    label: "欠费6个月",
                    value: "fee6",
                },
                {
                    label: "欠费7个月",
                    value: "fee7",
                },
                {
                    label: "欠费8个月",
                    value: "fee8",
                },
                {
                    label: "欠费9个月",
                    value: "fee9",
                },
                {
                    label: "欠费10个月",
                    value: "fee10",
                },
                {
                    label: "欠费11个月",
                    value: "fee11",
                },
                {
                    label: "欠费12个月",
                    value: "fee12",
                },
                {
                    label: "欠费1-2年",
                    value: "fee13",
                },
                {
                    label: "欠费2-3年",
                    value: "fee14",
                },
                {
                    label: "欠费3-4年",
                    value: "fee15",
                },
                {
                    label: "欠费4-5年",
                    value: "fee16",
                },
                {
                    label: "欠费5年以上",
                    value: "fee17",
                },
                {
                    label: "欠费合计",
                    value: "fee",
                },
            ],
            types: [
                {
                    label: "全部",
                    value: "",
                },
                {
                    label: "政企",
                    value: "政企",
                },
                {
                    label: "公众",
                    value: "公众",
                },
                {
                    label: "其他",
                    value: "其他",
                },
            ],
        };
    },
    methods: {
        getHeight() {
            this.height = window.innerHeight - 60 - 30 - 175;
        },
        pickerDisabled() {
            let self = this;
            return {
                disabledDate(time) {
                    if (self.disabledTime) {
                        var timeyear = time.getFullYear();
                        var timemonth = time.getMonth() + 1;
                        if (timemonth >= 1 && timemonth <= 9) {
                            timemonth = "0" + timemonth;
                        }
                        var currentdate =
                            timeyear.toString() + timemonth.toString();
                        if (currentdate > self.disabledTime) {
                            return true;
                        }
                    }
                },
            };
        },
        // 初始化列表接口
        getInitList() {
            this.showTableLoading = true;
            $budgetAPI.getListOweAge(
                this.form,
                (res) => {
                    if (res.code == 0) {
                        this.tableData = res.content;
                        this.$refs.tablePx.reloadData(this.tableData.dataPRO);
                        this.$refs.tablePx2.reloadData(this.tableData.dataSERV);
                        this.$refs.tablePx3.reloadData(this.tableData.dataOCS);
                    } else {
                        this.tableData = [];
                        this.$refs.tablePx.reloadData([]);
                        this.$refs.tablePx2.reloadData([]);
                        this.$refs.tablePx3.reloadData([]);
                    }
                    this.showTableLoading = false;
                },
                (err) => {
                    console.log(err);
                }
            );
        },
        search() {
            this.getInitList();
        },
        handle_export() {
            const { form } = this;
            var params = {
                ...form,
                token: getCookie("token"),
            };
            window.open(
                `${url}/oweAccount/ExportOweAgeData?${qs.stringify(params)}`,
                "_self"
            );
        },
        async initDate() {
            this.form.month = await this.getMonth();
            this.getInitList();
        },
        getMonth() {
            return new Promise((resolve) => {
                $budgetAPI.incomeKeepRegionalMonth({ maximum: 16 }, (res) => {
                    resolve(res.content);
                });
            });
        },
    },
    created() {
        this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        this.form.areaId = this.accountInfo.areaId;
        this.initDate();
        window.addEventListener("resize", this.getHeight);
    },
    destroyed() {
        // 计算高度
        window.removeEventListener("resize", this.getHeight);
    },
};
</script>

<style lang="scss" scoped>
.onw_container {
    width: 100%;
    height: 100%;
    & > header {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .page_box {
        display: flex;
        justify-content: flex-end;
    }
}
</style>
